<template>
  <view class="scrollable-tab">
    <u-sticky bg-color="#fff">
      <u-tabs
        :list="tabs"
        line-width="40"
        line-height="6"
        line-color="#2EA462"
        :active-style="{
          color: '#303133',
          fontWeight: 'bold',
          fontSize: '16px',
          transform: 'scale(1.05)',
        }"
        :inactive-style="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        item-style="padding-left: 15px; padding-right: 15px; height: 40px;"
        @click="handleTabClick"
      />
    </u-sticky>
    <!--    <view class="content"> -->
    <!--      <view v-for="(item, index) in tabs" :id="`container-${index}`" :key="index" class="pt40px"> -->
    <!--        <slot name="tabContent" :item="item" :index="index" /> -->
    <!--      </view> -->
    <!--    </view> -->
  </view>
</template>

<script>
const lineBg = ''
export default {
  name: 'DkScrollableTab',
  props: {
    tabs: {
      type: Array,
      required: true,
      validator: tabs => tabs.every(tab => tab.title && tab.content),
    },
  },
  data() {
    return {
      activeIndex: 0,
      lineBg,
    }
  },
  methods: {
    handleTabClick(item) {
      console.log('click', item)
      this.activeIndex = item.index
      // 滚动到对应容器
      this.scrollToContainer(item.index)
      this.$emit('change', item)
    },

    scrollToContainer(containerIndex) {
      uni.pageScrollTo({
        selector: `#container-${containerIndex}`,
        duration: 300,
      })

      // const selectorQuery = uni.createSelectorQuery().in(this)
      // selectorQuery.select(`#container-${containerIndex}`).boundingClientRect()
      //
      // selectorQuery.exec((res) => {
      //   console.log('res', res[0])
      //   if (res[0]) {
      //     const targetRect = res[0]
      //     uni.pageScrollTo({
      //       scrollTop: targetRect.top,
      //       duration: 300,
      //     })
      //   }
      //   else {
      //     console.error('未能找到目标容器')
      //   }
      // })
    },
  },
}
</script>

<style>

</style>
